<template>
	<view class="fun-flex-col page">
		
		<view class="fun-flex-col group">
			<view class="fun-flex-col fun-self-stretch section_3">
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font text_3">Dollar Amount</text>
					<text class="font_2 text_4">${{rechargeInfo.priceAmount}}</text>
				</view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font_3 text_5">Type of transaction</text>
					<text class="font_2 text_6">Top Up</text>
				</view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font text_7 pos_2">Transaction Fee</text>
					<text class="font_2 text_8">${{rechargeInfo.serviceCharge}}</text>
				</view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font">Actual Amount</text>
					<text class="font_4 text_4">{{rechargeInfo.payAmount}} {{rechargeInfo.payCurrency}}</text>
				</view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font">Protocal</text>
					<text class="font_4">{{rechargeInfo.protocol}}</text>
				</view>
			</view>
			
			<view class="fun-flex-col fun-self-stretch section_4">
				<view class="fun-flex-row fun-justify-between fun-items-center group_5">
					<text class="font">Transaction Status</text>
					<view class="status progress" v-if='rechargeInfo.status == 1 || rechargeInfo.status == 2 || rechargeInfo.status == 3'>{{rechargeInfo.status | rechargeStatus}}</view>
					<view class="status completed" v-if='rechargeInfo.status == 4'>{{rechargeInfo.status | rechargeStatus}}</view>
					<view class="status failed" v-if='rechargeInfo.status == 5 || rechargeInfo.status == 6'>{{rechargeInfo.status | rechargeStatus}}</view>
				</view>
				
				<view class="divider_2 view"></view>
				<view class="fun-flex-row fun-justify-between group_6">
					<text class="font">Order Number</text>
					<text class="font_4 text_14">{{rechargeInfo.orderNo}}</text>
				</view>
				<view class="divider_2 view_2"></view>
				<view class="fun-flex-row fun-items-center fun-justify-between group_7">
					<text class="font">Address</text>
					<text class="dizhi">{{rechargeInfo.address}}</text>
				</view>
				<view class="divider_2 view_3"></view>
				<view class="fun-flex-row fun-justify-between group_8">
					<text class="font">Creation Time</text>
					<text class="font_4 text_17">{{UTILS.setDateFormat(rechargeInfo.createdAt)}}</text>
				</view>
				<view class="divider_2 view_4"></view>
				
				<template>
					<view class="fun-flex-row fun-justify-between group_8" v-if='rechargeInfo.status == 1 || rechargeInfo.status == 2 || rechargeInfo.status == 3'>
						<text class="font text_18">Paid Amount</text>
						<text class="font_4 text_19">{{rechargeInfo.paidAmount}} {{rechargeInfo.payCurrency}}</text>
					</view>
					
					<view class="fun-flex-row fun-justify-between group_8" v-if='rechargeInfo.status == 4'>
						<text class="font">Completed Time</text>
						<text class="font_4 text_17">{{UTILS.setDateFormat(rechargeInfo.doneAt)}}</text>
					</view>
					
					<view class="fun-flex-row fun-justify-between group_8" v-if='rechargeInfo.status == 5 || rechargeInfo.status == 6'>
						<text class="font">Expiry Time</text>
						<text class="font_4 text_17">{{UTILS.setDateFormat(rechargeInfo.timeoutAt)}}</text>
					</view>
				</template>
				<view class="divider_2 view_5"></view>
			</view>
			
			<template v-if='rechargeInfo.status == 1 || rechargeInfo.status == 2 || rechargeInfo.status == 3'>
				<text class="fun-self-center font_5 text_20">Address</text>
				<view class="fun-flex-col fun-self-stretch group_9">
					<view class="fun-flex-row fun-items-center fun-justify-between section_5">
						<text class="address">{{rechargeInfo.address}}</text>
						<image class="fun-ml-2 image_4" src="@/static/account/copy.png" @click="copy"/>
					</view>
					<view class="fun-mt-12 fun-flex-col fun-justify-start fun-items-center fun-self-center group_10">
						<uqrcode ref="qrcode" v-show='rechargeInfo.address' canvas-id="qrcode" :value="rechargeInfo.address" :size="140">
						</uqrcode>
					</view>
					<text class="fun-mt-12 fun-self-stretch font text_22">
						This recharge QR code or address is valid within 30 minutes, please do not delay or repeat payment.
					</text>
				</view>
			</template>
		</view>
		<view class="fun-flex-col fun-items-center group_11">
			<text class="font_3 text_23">Have questions about the deal?</text>
			<view class="fun-mt-14 text-wrapper_2" @click="enquiry">Enquiry</view>
		</view>
	</view>
</template>

<script>
	import {rechargeOrderInfo} from "@/api/account.js"
	export default {
		data() {
			return {
				queryDate:{
					orderId:"",
					timeZone:8
				},
				rechargeInfo:{}
			};
		},
		
		onLoad(option) {
			this.queryDate.timeZone = this.UTILS.getTimeZone() || 8;
			this.queryDate.orderId = this.UTILS.stringToNum(decodeURIComponent(option.orderId)) || null;
			this.getRechargeOrderInfo()
		},

		methods: {
			getRechargeOrderInfo(){
				rechargeOrderInfo(this.queryDate).then(res => {
					if(res.code == 0){
						this.rechargeInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			copy(){
				uni.setClipboardData({
					data: this.rechargeInfo.address,
					success: ()=> {
						this.UTILS.logStr("Copy success")
					}
				});
			},
			enquiry(){
				uni.navigateTo({url:'/pages/more/contactUs'})
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 40rpx 30rpx 36rpx 30rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.group {
			.section_3 {
				padding: 0 28rpx;
				background-color: #f6f6f6;
				border-radius: 20rpx;
				.group_2 {
					padding: 24rpx 0;
					.text_4 {
						font-weight: 700;
					}
				}
				.group_2:not(:last-child){
					border-bottom: solid 2rpx #b0b1bf24;
				}
			}

			.section_4 {
				margin-top: 40rpx;
				padding: 0 28rpx;
				background-color: #f6f6f6;
				border-radius: 20rpx;
				.group_5 {
					padding: 28rpx 0;
					.status {
						width: 188rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 4rpx;
						font-weight: 500;
					}
					.progress{
						color: #8C7F44;
						background: #FDF0BA;
					}
					
					.completed{
						color: #51844D;
						background: #E9FAF0;
					}
					
					.failed{
						color: #CA5456;
						background: rgba(255,146,165,0.3);
					}
				}
		
				.divider_2 {
					background-color: #b0b1bf24;
					height: 2rpx;
				}


				.group_6 {
					padding: 28rpx 0;
				}
				.group_7 {
					padding: 28rpx 0;
					.dizhi{
						flex: 0.9;
						white-space: nowrap; /* 确保文本在一行内显示 */
						overflow: hidden; /* 超出容器部分隐藏 */
						text-overflow: ellipsis;
					}
				}

				.group_8 {
					padding: 28rpx 0;
				}
			}

			.font {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #7f7f7f;
			}

			.font_4 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #000000;
			}

			.font_5 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #22262e;
			}

			.text_20 {
				margin-top: 36rpx;
			}

			.group_9 {
				margin-top: 20rpx;

				.section_5 {
					margin: 0 40rpx;
					padding: 8rpx 28rpx;
					background-color: #f4f5f6;
					border-radius: 8rpx;
					border: solid 2rpx #e5e8eb;
				}

				.group_10 {
					padding: 32rpx;
					border-radius: 16rpx;
					border: dotted 4rpx #1a7b99;
					.section_6 {
						padding: 32rpx;
						background-color: #cdb4db;
						border-radius: 16rpx;
						overflow: hidden;
						.image_5 {
							width: 20rpx;
							height: 16rpx;
						}
					}
				}

				.text_22 {
					text-align: center;
					word-break: break-all;
				}
			}
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}
		.address{
			flex: 0.98;
			white-space: nowrap; /* 确保文本在一行内显示 */
			overflow: hidden; /* 超出容器部分隐藏 */
			text-overflow: ellipsis;
			color: #23262F;
		}
		.group_11 {
			margin-top: 60rpx;
			.text-wrapper_2 {
				padding: 12rpx 50rpx;
				background-color: #ffffff33;
				border-radius: 24rpx;
				border: solid 2rpx #7f7f7f;
				text-align: center;
			}
		}

		.font_3 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			color: #7f7f7f;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			color: #000000;
		}
	}
</style>